<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean"%>
<%@ taglib prefix="logic" uri="http://struts.apache.org/tags-logic"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="id" lang="id">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>  
<script type="text/javascript">
function confirmFinish(params, txt) { 
	return confirmbox(txt ,
            function(ret) {
                if (ret) {
                	var valid = true;
                	var listquestion = document.body.getElementsByTagName('div');
                	for(var i = 0; listquestion != null && i < listquestion.length; i++){
                		var element = listquestion[i];
                		if(element != null && "question" == element.getAttribute("class")){
                			var chosen = false;
                			var listAns = element.getElementsByTagName("input");
                			for(var k = 0; listAns != null && k < listAns.length; k++){
                				var eAns = listAns[k];
                				if(eAns.getAttribute("type") == "checkbox" || eAns.getAttribute("type") == "radio"){
                					if(eAns.checked){
                						chosen = true;
                					}
                				}  
                			}
                			if(chosen == false){
                				valid = false;
                				var h4 = element.getElementsByTagName("h4")[0];
                				h4.setAttribute("style", "color:red;");
                			} else {
                				var h4 = element.getElementsByTagName("h4")[0];
                				h4.removeAttribute("style");
                			}
                		}
                	}
                	if(!valid){
                		alert('Please answer all questions, questions that you have not answer is assigned red color!');
                	} else {
	                	var postForm = document.forms[0];
	                	var ps = params.split("&");  
	                	for (i = 0; ps != null && i < ps.length; i++) {
	                		var tmp = ps[i].split("=");
	                		if(tmp != null && tmp.length == 2){
		                		var param = document.createElement("input");
		                		param.type = "hidden";
		                		param.name = tmp[0];
		                		param.value = encodeURI(tmp[1]);
		                		postForm.appendChild(param);
	                		}
	                	}
	                	postForm.submit();
                	}
                }
            }
      );
}
</script>
</head>
<body>
	<html:form action="/surveyTakeUpdate.do">
	<html:hidden property="id" />
	<div class="outerbox">
		<div class="mainHeading">
			<div class=""
				style="width: 250px; height: 32px; background: url(images/formTitleBackground.png) no-repeat top right; font-color: #CC0000;">
				<h2 class="formTitle">TAKE SURVEY</h2>
			</div>
		</div> 
	</div>
	 <div class="outerbox">
	 	<div style="padding-left: 270px;min-height: 500px;padding-right: 270px;">
		 	 <bean:write filter="false" name="surveyTakeUpdate" property="html"/>
		 	 <br/><hr/>
		 	 <center>
		 	 	<input type="button" value="Submit" name="btnAdd" class="plainbtn" id="btnAdd" onclick="return confirmFinish('btnAdd=clicked&act=add','Are you sure you want to submit all the answers?');"></input>
		 	 </center>
		 	 <br/><br/>
	 	</div>
	 </div>
	</html:form>
</body>
</html>